@include ('user.header',['title'=>'修改密码'])

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">修改密码</h5>
                </div>
                <div class="card-body">
                    <!-- 提示框容器 -->
                    <div id="alertContainer" class="mb-3"></div>
                    
                    <form id="passwordForm">
                        <!-- 表单字段 -->
                        <div class="form-group">
                            <label for="current_password" class="form-label">当前密码</label>
                            <input type="password" class="form-control" id="current_password" name="current_password" required>
                        </div>
                        <div class="form-group">
                            <label for="new_password" class="form-label">新密码</label>
                            <input type="password" class="form-control" id="new_password" name="new_password" required>
                        </div>
                        <div class="form-group">
                            <label for="confirm_password" class="form-label">确认新密码</label>
                            <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                        </div>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@include ('user.footer')

<!-- JS提交逻辑 -->
<script>
document.getElementById('passwordForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // 获取表单数据
    const formData = {
        current_password: document.getElementById('current_password').value,
        new_password: document.getElementById('new_password').value,
        confirm_password: document.getElementById('confirm_password').value,
        api_token: '{{ session('user')->api_token }}' // CSRF Token
    };
    
    // API Token 直接写入 JS 中
   
    
    fetch('/api/user/password/update', {
        method: 'POST',
        body: JSON.stringify(formData),
        headers: {
            'Content-Type': 'application/json',
           
        }
    })
    .then(response => response.json())
    .then(data => {
        // 清除旧提示
        document.getElementById('alertContainer').innerHTML = '';
        
        // 创建提示框
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert ${data.status === '1' ? 'alert-success' : 'alert-danger'} alert-dismissible fade show`;
        alertDiv.innerHTML = `<strong>${data.status === '1' ? '成功' : '失败'}：</strong> ${data.msg}`;
        alertDiv.appendChild(document.createElement('button')).classList.add('btn-close');
        alertDiv.querySelector('.btn-close').setAttribute('data-bs-dismiss', 'alert');
        alertDiv.querySelector('.btn-close').setAttribute('aria-label', 'Close');
        document.getElementById('alertContainer').appendChild(alertDiv);
        
        // 成功时清空表单
        if(data.status === '1') {
            document.getElementById('passwordForm').reset();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('alertContainer').innerHTML = 
            '<div class="alert alert-danger alert-dismissible fade show"><strong>失败：</strong> 请求失败，请重试<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
    });
});
</script>